<template>
  <div class="homeCategory-container">
    <div class="nav-bar">
      <van-nav-bar
        title="分类"
        left-text="返回"
        left-arrow
        class="category-nav-bar"
        @click-left="back"
      />
    </div>

    <div class="middle-search">
      <div class="search">
        <div class="search-left">
          <van-search
            class="input-search"
            shape="round"
            background="#F8F8F8"
            placeholder="商品搜索"
          />
        </div>
        <div class="search-right">取消</div>
      </div>
      <div class="search-nav">
        <div :class="{ active: flag1 == 0 }" @click="synthesis">综合</div>
        <div class="price" @click="goodssort">
          <span :class="{ active: flag1 == 1 }">价格</span>
          <span class="price-icon">
            <van-icon
              name="arrow-up"
              class="icon-price"
              :class="{ active: flag == 1 }"
            />
            <van-icon
              name="arrow-down"
              color=""
              class="icon-price"
              :class="{ active: flag == 2 }"
            />
          </span>
        </div>
        <div :class="{ active: flag1 == 2 }" @click="sort">分类</div>
      </div>
    </div>

    <div class="brank"></div>


    <div class="goods-cars">
      <div class="cards-container" v-for="item in detailist" :key="item.id">
        <div class="card">
          <van-image :src="item.list_pic_url" lazy-load></van-image>
        </div>
        <div class="text">
          <p class="name">{{ item.name }}</p>
          <p class="price">&yen; {{ item.retail_price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { helperaction } from "@/api/home/HomeHistory";
import { goodsList } from "@/api/home/HomeCategory";
export default {
  data() {
    return {
      goodlist: [],
      detailist: [],
      flag: 0,
      flag1: "",
    };
  },
  methods: {
    async getdata() {
      let id = this.$route.query.id;
      if (id === undefined) {
        let res = await helperaction({
          keyword: this.$route.query.name,
          order: "",
        });
        this.detailist = res.keywords;
      } else {
        let res = await goodsList({
          isHot: id == 0 ? " " : "1",
          isNew: id == 1 ? "1" : "0",
          order: this.flag == 1 ? "asc" : "desc",
        });
        this.goodlist = res.data;
      }
    },
    back() {
      this.$router.back();
    },
    goodssort() {
      this.flag1 = 1;
      if (this.flag == 2) {
        this.flag = 1;
      } else {
        this.flag = 2;
      }
      this.getdata();
    },
    synthesis() {
      this.flag1 = 0;
      this.flag = 0;
    },
    sort() {
      this.flag1 = 2
      this.flag = 0;
    },
  },

  mounted() {
    this.getdata();
  },
};
</script>

<style scoped lang='scss'>
.homeCategory-container {
  height: calc(100vh - 108px);
  background-color: #f8f8f8;
  .category-nav-bar {
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    background-color: #fff;
  }
  .middle-search {
    background-color: #fff;
    width: 100%;
    height: 215px;
    padding-top: 36px;
    .search {
      width: 100%;
      height: 70px;
      padding-left: 20px;
      margin-bottom: 51px;
      @include between;
      .search-left {
        width: 605px;
        height: 100%;
        .input-search {
          width: 100%;
          height: 100%;
          border-radius: 35px;
        }
      }
      .search-right {
        width: 89px;
        height: 42px;
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
    .search-nav {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      font-size: 28px;
      color: #212121;
      letter-spacing: 0;
      font-weight: 400;
      .price {
        display: flex;
        height: 100%;
        .price-icon {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding-bottom: 17px;
          .icon-price {
            width: 13.3px;
            height: 6.6px;
          }
        }
      }
      .active {
        color: #cea62a;
      }
    }
  }
  .brank {
    height: 20px;
    background-color: #f8f8f8;
  }
  .goods-cars {
    padding: 0 20px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .cards-container {
      width: 350px;
      height: 490px;
      .card {
        height: 350px;
        background-color: #fff;
        img {
          width: 100%;
        }
      }
      .text {
        height: 140px;
        background-color: #f8f8f8;
        padding-top: 17px;
        // box-sizing: border-box;
        .name {
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
        }
        .price {
          font-size: 26px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>